<template>
  <template v-if="iconSvg">
    <icon-svg v-bind="{ ...props }" />
  </template>
  <template v-else>
    <span v-if="src" class="icon-anticon-img" :class="`icon-anticon-${id}`">
      <img :src="src" :style="{ height: `${size}px` }" />
    </span>
  </template>
</template>

<script setup>
import { computed } from 'vue'
import Icons from '@arco-design/web-vue/es/icon'

defineOptions({
  name: 'IconArco'
})

const props = defineProps({
  id: String,
  type: String,
  src: String,
  strokeWidth: Number,
  strokeLinejoin: String,
  strokeLinecap: String,
  spin: Boolean,
  size: [Number, String],
  style: [Object, String]
})

/**
 * 短折转双驼峰
 */
const toDoubleUpper = (str) => {
  const fristStr = str.slice(0, 1).toUpperCase()
  const lastStr = str.slice(1).replace(/-(\w)/g, function (match, letter) {
    return letter.toUpperCase()
  })
  return `${fristStr}${lastStr}`
}

/**
 * type存在时，调用@ant-design/icons-vue
 * 当icons-vue有图标时，显示icon
 * icons-vue不存在时，默认为image
 */
const iconSvg = computed(() => {
  return props.type && Icons[toDoubleUpper(props.type)]
})
</script>
